<script setup>
import { ref, computed } from "vue";
import { message } from "ant-design-vue";
defineOptions({
  name: "edit-edge-form",
});
const props = defineProps({
  edge: {
    type: Object,
    default: () => {
      return {
        from: 0,
        to: 1,
      };
    },
  },
  behaviorList: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

const showEdgeText = computed(() => {
  if (
    !props.behaviorList[Number(props.edge.from)] ||
    !props.behaviorList[Number(props.edge.to)]
  ) {
    return {
      from: props.edge.from,
      to: props.edge.to,
    };
  }

  return {
    from: props.behaviorList[Number(props.edge.from)],
    to: props.behaviorList[Number(props.edge.to)],
  };
});

const edgeOptions = ref({
  color: {
    color: "#000",
  },
  font: {
    color: "#000",
    align: "bottom",
    size: 20,
  },
  width: 2,
  length: 100,
});

const emits = defineEmits(["saveEdgeOptions"]);

const handleSaveEdgeOptions = () => {
  message.success("保存成功!");
  emits("saveEdgeOptions", edgeOptions.value);
};
</script>

<template>
  <div class="edit-edge-form">
    <h2 style="margin-bottom: 20px">
      o(*￣▽￣*)ブ当前正在编辑的边是 {{ showEdgeText.from }} 到
      {{ showEdgeText.to }}
    </h2>
    <my-row>
      <my-label label="边颜色">
        <el-color-picker v-model="edgeOptions.color.color"></el-color-picker>
      </my-label>
      <my-label label="字体大小">
        <section style="width: 200px">
          <a-slider v-model:value="edgeOptions.font.size"></a-slider>
        </section>
      </my-label>
      <my-label label="字体颜色">
        <el-color-picker v-model="edgeOptions.font.color"></el-color-picker>
      </my-label>
      <my-label label="粗细">
        <section style="width: 200px">
          <a-slider
            v-model:value="edgeOptions.width"
            :min="1"
            :max="10"
          ></a-slider>
        </section>
      </my-label>
      <my-label label="长度">
        <section style="width: 300px">
          <a-slider v-model:value="edgeOptions.length" :min="100" :max="500">
          </a-slider>
        </section>
      </my-label>
    </my-row>
    <a-button @click="handleSaveEdgeOptions">保存</a-button>
  </div>
</template>

<style lang="scss" scoped></style>
